// 兼容旧版浏览器的标签页可见性 API
function getVisibilityState() {
  let stateKey;
  let eventKey;

  // 判断标准浏览器是否支持 document.hidden
  if (typeof document.hidden !== 'undefined') {
    stateKey = 'hidden';
    eventKey = 'visibilitychange';
  }
  // IE 10/11 的前缀
  else if (typeof document.msHidden !== 'undefined') {
    stateKey = 'msHidden';
    eventKey = 'msvisibilitychange';
  }
  // WebKit（早期 Safari、Chrome）前缀
  else if (typeof document.webkitHidden !== 'undefined') {
    stateKey = 'webkitHidden';
    eventKey = 'webkitvisibilitychange';
  }

  return {
    isHidden: stateKey ? document[stateKey] : false, // 当前是否隐藏（true 表示标签页处于非活动状态）
    eventKey                                    // 返回事件名称，供监听用
  };
}

// 调用函数获取当前状态和事件名称
const { isHidden, eventKey } = getVisibilityState();

// 打印当前标签页是否活动
console.log(`标签页当前状态: ${isHidden ? '非活动' : '活动'}`);
document.addEventListener(eventKey, () => {
  const hidden = getVisibilityState().isHidden;
  console.log(`标签页状态变更为: ${hidden ? '非活动' : '活动'}`);
});
